<template>
  <view class="wrap-fff">
    <!--  第三级子品牌  -->
    <view class="title fw-bold fs-36 mb-38">
      {{title}}
    </view>
    <view class="list">
      <view class="item" @click="goAdd(item)" v-for="(item ,index) in skuList" :key="index">
        <view class="img-box">
          <easy-loadimage
              mode="widthFix"
              :image-src="item.suk_image"
              width="100%"
              height="100%"
              borderRadius="12rpx"/>
        </view>
        <view class="title">
          <text>{{item.suk_name}}</text>
        </view>
      </view>
    </view>
    <view v-if="skuList.length==0">
      <emptyPage title="暂无商品，去看点别的吧～" ></emptyPage>
    </view>
  </view>
</template>

<script>
import {getBrandSku} from "@/api/store";
import emptyPage from "@/components/emptyPage.vue";

export default {
  components: {emptyPage},
  data() {
    return {
      title:'',
      skuList:[],
      ids:''
    }
  },
  onLoad( options){
    if(options.ids){
      this.ids = options.ids
    }
    if(options.title){
      this.title = options.title
    }
    this.getBrandSku()
  },
  methods: {
    getBrandSku(){
      getBrandSku({
        brand_id:this.ids
      }).then(res=>{
        this.skuList = res.data
      })
    },
    goAdd(item){
      uni.navigateTo({
        url:`/pages/admin/goods/goodsAdd?sku=${JSON.stringify(item)}&ids=${this.ids}`
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.wrap-fff{
  padding: 20rpx 24rpx;
}
.list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    padding: 20rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    width: 48%;
    .img-box{
      border:1rpx solid #f8f8f8;
      width: 100%;
      height: 300rpx;
    }
    .title{
      width: 100%;
      text-align: center;
      color: #888;
      margin-top: 20rpx;
      min-height: 60rpx;
      font-size: 24rpx;
    }
  }
}
</style>